<template>
  <div class="dashboard-container">
    <!-- 轮播图 -->
    <div class="banner-section">
      <el-carousel height="400px">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <img :src="banner.imageUrl" class="banner-image" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
      <el-row :gutter="20">
        <el-col :span="3" v-for="category in categories" :key="category.id">
          <div class="category-item" @click="navigateToCategory(category.id)">
            <el-icon size="24">
              <component :is="category.icon" />
            </el-icon>
            <div class="category-name">{{ category.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 热销商品 -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">热销商品</h2>
        <el-button type="text" @click="navigateTo('/home/hot-products')">查看更多 <el-icon>
            <ArrowRight />
          </el-icon></el-button>
      </div>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :md="8" :lg="6" v-for="product in hotProducts" :key="product.id">
          <product-card :product="product" />
        </el-col>
      </el-row>
    </div>

    <!-- 新品上架 -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">新品上架</h2>
        <el-button type="text" @click="navigateTo('/home/new-products')">查看更多 <el-icon>
            <ArrowRight />
          </el-icon></el-button>
      </div>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :md="8" :lg="6" v-for="product in newProducts" :key="product.id">
          <product-card :product="product" />
        </el-col>
      </el-row>
    </div>

    <!-- 品牌专区 -->
    <div class="section">
      <div class="section-header">
        <h2 class="section-title">品牌专区</h2>
        <el-button type="text" @click="navigateTo('/home/brands')">查看更多 <el-icon>
            <ArrowRight />
          </el-icon></el-button>
      </div>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="brand in featuredBrands" :key="brand.id">
          <div class="brand-card" @click="navigateToBrand(brand.id)">
            <img :src="brand.logo" class="brand-logo" />
            <div class="brand-name">{{ brand.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import ProductCard from '@/components/ProductCard.vue'

const router = useRouter()

// 轮播图数据
const banners = ref([
  { imageUrl: 'https://img.alicdn.com/imgextra/i1/O1CN01ky3Tvb1OWj0Hg8qKH_!!6000000001721-0-tps-1920-500.jpg' },
  { imageUrl: 'https://img.alicdn.com/imgextra/i2/O1CN01nEfHmY1y4K3ePrKdG_!!6000000006528-0-tps-1920-500.jpg' },
  { imageUrl: 'https://img.alicdn.com/imgextra/i3/O1CN01Mpgc2d1aaVFdUJzAg_!!6000000003341-0-tps-1920-500.jpg' }
])

// 分类数据
const categories = ref([
  { id: 1, name: '手机', icon: 'Iphone' },
  { id: 2, name: '电脑', icon: 'Monitor' },
  { id: 3, name: '家电', icon: 'HomeFilled' },
  { id: 4, name: '服饰', icon: 'ShoppingBag' },
  { id: 5, name: '美妆', icon: 'Brush' },
  { id: 6, name: '食品', icon: 'Food' },
  { id: 7, name: '图书', icon: 'Reading' },
  { id: 8, name: '运动', icon: 'Football' }
])

// 热销商品数据
const hotProducts = ref([
  {
    id: 1,
    name: '苹果 iPhone 15 Pro',
    price: 7999,
    originalPrice: 8999,
    mainImage: 'https://img.alicdn.com/imgextra/i4/O1CN01Qg1L2L1aEEYLCJYQK_!!6000000003294-0-tps-800-800.jpg',
    sales: 1000,
    isHot: true
  },
  {
    id: 2,
    name: '华为 Mate 60 Pro',
    price: 6999,
    originalPrice: 7999,
    mainImage: 'https://img.alicdn.com/imgextra/i3/O1CN01FQW2Oa1vfGEX3vOjI_!!6000000006205-0-tps-800-800.jpg',
    sales: 850,
    isHot: true
  },
  {
    id: 3,
    name: '小米 14 Ultra',
    price: 5999,
    originalPrice: 6499,
    mainImage: 'https://img.alicdn.com/imgextra/i1/O1CN01Bd6Lw11Ux0LWGOoXl_!!6000000002581-0-tps-800-800.jpg',
    sales: 750,
    isHot: true
  },
  {
    id: 4,
    name: 'OPPO Find X7 Ultra',
    price: 5999,
    originalPrice: 6299,
    mainImage: 'https://img.alicdn.com/imgextra/i2/O1CN01Qx0YTw1lUBsWyGBEQ_!!6000000004825-0-tps-800-800.jpg',
    sales: 680,
    isHot: true
  },
  {
    id: 5,
    name: 'vivo X100 Pro',
    price: 5699,
    originalPrice: 5999,
    mainImage: 'https://img.alicdn.com/imgextra/i1/O1CN01Zd7Pte1UwNLVKIlw2_!!6000000002582-0-tps-800-800.jpg',
    sales: 620,
    isHot: true
  },
  {
    id: 6,
    name: '三星 Galaxy S24 Ultra',
    price: 9999,
    originalPrice: 10999,
    mainImage: 'https://img.alicdn.com/imgextra/i3/O1CN01FQW2Oa1vfGEX3vOjI_!!6000000006205-0-tps-800-800.jpg',
    sales: 580,
    isHot: true
  }
])

// 新品上架数据
const newProducts = ref([
  {
    id: 7,
    name: 'MacBook Pro M3 Max',
    price: 16999,
    originalPrice: 18999,
    mainImage: 'https://img.alicdn.com/imgextra/i4/O1CN01Qg1L2L1aEEYLCJYQK_!!6000000003294-0-tps-800-800.jpg',
    sales: 300,
    isNew: true
  },
  {
    id: 8,
    name: '华为 MateBook X Pro',
    price: 12999,
    originalPrice: 13999,
    mainImage: 'https://img.alicdn.com/imgextra/i3/O1CN01FQW2Oa1vfGEX3vOjI_!!6000000006205-0-tps-800-800.jpg',
    sales: 250,
    isNew: true
  },
  {
    id: 9,
    name: '戴尔 XPS 15',
    price: 14999,
    originalPrice: 15999,
    mainImage: 'https://img.alicdn.com/imgextra/i1/O1CN01Bd6Lw11Ux0LWGOoXl_!!6000000002581-0-tps-800-800.jpg',
    sales: 200,
    isNew: true
  },
  {
    id: 10,
    name: '联想 ThinkPad X1',
    price: 13999,
    originalPrice: 14999,
    mainImage: 'https://img.alicdn.com/imgextra/i2/O1CN01Qx0YTw1lUBsWyGBEQ_!!6000000004825-0-tps-800-800.jpg',
    sales: 180,
    isNew: true
  },
  {
    id: 11,
    name: '惠普 Spectre x360',
    price: 11999,
    originalPrice: 12999,
    mainImage: 'https://img.alicdn.com/imgextra/i1/O1CN01Zd7Pte1UwNLVKIlw2_!!6000000002582-0-tps-800-800.jpg',
    sales: 150,
    isNew: true
  },
  {
    id: 12,
    name: '微软 Surface Pro 9',
    price: 9999,
    originalPrice: 10999,
    mainImage: 'https://img.alicdn.com/imgextra/i3/O1CN01FQW2Oa1vfGEX3vOjI_!!6000000006205-0-tps-800-800.jpg',
    sales: 120,
    isNew: true
  }
])

// 品牌数据
const featuredBrands = ref([
  { id: 1, name: '苹果', logo: 'https://img.alicdn.com/imgextra/i4/O1CN01Qg1L2L1aEEYLCJYQK_!!6000000003294-0-tps-800-800.jpg' },
  { id: 2, name: '华为', logo: 'https://img.alicdn.com/imgextra/i3/O1CN01FQW2Oa1vfGEX3vOjI_!!6000000006205-0-tps-800-800.jpg' },
  { id: 3, name: '小米', logo: 'https://img.alicdn.com/imgextra/i1/O1CN01Bd6Lw11Ux0LWGOoXl_!!6000000002581-0-tps-800-800.jpg' },
  { id: 4, name: 'OPPO', logo: 'https://img.alicdn.com/imgextra/i2/O1CN01Qx0YTw1lUBsWyGBEQ_!!6000000004825-0-tps-800-800.jpg' },
  { id: 5, name: 'vivo', logo: 'https://img.alicdn.com/imgextra/i1/O1CN01Zd7Pte1UwNLVKIlw2_!!6000000002582-0-tps-800-800.jpg' },
  { id: 6, name: '三星', logo: 'https://img.alicdn.com/imgextra/i3/O1CN01FQW2Oa1vfGEX3vOjI_!!6000000006205-0-tps-800-800.jpg' }
])

// 导航方法
const navigateToCategory = (categoryId) => {
  router.push({
    path: '/home/products',
    query: { category: categoryId }
  })
}

const navigateToBrand = (brandId) => {
  router.push({
    path: '/home/products',
    query: { brand: brandId }
  })
}

const navigateTo = (path) => {
  router.push(path)
}

onMounted(() => {
  console.log('Dashboard mounted')
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.banner-section {
  margin-bottom: 30px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-nav {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.category-item:hover {
  transform: translateY(-5px);
  color: #409EFF;
}

.category-name {
  margin-top: 10px;
  font-size: 14px;
}

.section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #409EFF;
  border-radius: 2px;
}

.brand-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brand-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.2);
}

.brand-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
}

.brand-name {
  font-size: 16px;
  font-weight: 500;
}
</style>